<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Error Report</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../../../../css/mui.min.css">
		<link rel="stylesheet" href="../../../../css/global.css">
		<link rel="stylesheet" href="../../../../css/style.css">
		<link href="../../../../css/task.css" rel="stylesheet" />
		<style>
		.details_con .clum {
            font-size: 16px;
            margin: 0 5px;
            display: flex;
            align-items: center;
            min-height: 50px;
            height: auto;
        }
		.details_con.t{
			margin-top: 0;
		}
        .details_con .clum .txt {
            flex: 1;
            text-align: right;
            line-height: 1.2;
            padding: 10px;
        }

        .title {
            font-size: 16px;
            padding: 15px 5px 10px;
            border-bottom: 1px solid #e8e8e8;
        }

        .item_box .item {
            margin: 0 0 15px;
        }
		.item_box .item.info{
			border-top: none;
			box-shadow: none;
			border-bottom: 1px solid #eceff1;
			border-radius: 0;
		}
		.item_box .item.info .bar{
			border-bottom: none;
			height: 30px;
			line-height: 30px;
			margin-bottom: 0;
		}
		.item_box .item .text{
			display: flex;
			min-height: 30px;
			height: auto;
		}
        .item_box .item .text span {
            width: 90px;
        }
		.page_cen{
			overflow: hidden;
		}
		#div {
			width: 0px;
			height: 0px;
			background: red;
			position: fixed;
			top: 65%;
			left: 50%;
		}
		/*移除底部或顶部三角,需要在删除此代码*/
		.mui-popover .mui-popover-arrow:after {
			width: 0px;
		}
		.mui-popover .title{
			border-bottom: none;
		}
    </style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 id="title" class="mui-title">Error Report</h1>
		</header>
		<div class="mui-content" v-cloak>
			<div id="div"></div>
			<div id="popover" class="mui-popover shadow popover">
				<p class="title" id="title">是否确认关闭该报告？</p>
				<div class="btn_box">
					<span class="fl" @click="confirmCancel">否</span>
					<span class="fr red" @click="errorClose">是</span>
				</div>
			</div>
			<div class="page_cen shadow" v-if="errorData">
				<p class="bg_title">基本信息</p>
				<div class="details_con t">
					<div class="clum">
						<span class="name">姓名</span>
						<span class="txt">{{errorData.name}}</span>
					</div>
					<div class="clum">
						<span class="name">部门</span>
						<span class="txt">{{errorData.dept}}</span>
					</div>
					<div class="clum">
						<span class="name">Error发生日期</span>
						<span class="txt">{{errorData.error_time}}</span>
					</div>
					<div class="clum">
						<span class="name">Factory PO#</span>
						<span class="txt">{{errorData.sales_order}}</span>
					</div>

					<div class="clum">
						<span class="name">仪器型号</span>
						<span class="txt">{{errorData.model}}</span>
					</div>
					<div class="clum">
						<span class="name">序号</span>
						<span class="txt">{{errorData.serial_no}}</span>
					</div>
				</div>
			</div>
			<div class="page_cen shadow" v-if="errorData">
				<p class="bg_title">用户信息</p>
				<div class="details_con t">
					<div class="clum">
						<span class="name">客户单位中文名称</span>
						<span class="txt">{{errorData.customer}}</span>
					</div>
					<div class="clum">
						<span class="name">客户单位英文名称</span>
						<span class="txt">{{errorData.customer_enname}}</span>
					</div>
				</div>
			</div>

			<div class="page_cen shadow" v-if="errorCodeData.length">
				<p class="bg_title">Error Code</p>
				<div class="details_con">
					<div class="item_box">
						<div class="item info" v-for="item in errorCodeData">
							<p class="bar">Error 代码：<span>{{item.err_code}}</span></p>
							<div class="text"><span>Error分类：</span>{{item.Err_Type}}</div>
							<div class="text"><span>描述：</span>{{item.err_longdesc}}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="page_cen shadow" v-if="partData.length">
				<div class="my-content-cell" @click="jumpToSparePartsList">
					<div class="inline-block">
						<em>备件信息</em>
						<span class="mui-icon mui-icon-arrowright arrow-right-position"></span>
					</div>
				</div>
			</div>
			<div class="page_cen shadow" v-if="picData.length">
				<div class="my-content-cell" id="pictureList" @click="jumpToPicList">
					<div class="inline-block" id="pjcgqd">
						<em>图片信息列表</em>
						<span class="mui-icon mui-icon-arrowright arrow-right-position"></span>
					</div>
				</div>
			</div>

			<div class="page_cen shadow t" v-if="errorData">
				<div class="details_con">
					<div class="clum">
						<span class="name">审批人</span>
						<span class="txt">{{errorData.DOA_Leader}}</span>
					</div>
					<div class="clum">
						<span class="name">问题描述</span>
						<span class="txt">{{errorData.problem_statement}}</span>
					</div>
					<div class="clum">
						<span class="name">原因</span>
						<span class="txt">{{errorData.root_cause}}</span>
					</div>
					<div class="clum">
						<span class="name">补救措施</span>
						<span class="txt">{{errorData.corrective_action_taken}}</span>
					</div>
					<div class="clum">
						<span class="name">补救措施执行人</span>
						<span class="txt">{{errorData.taken_by}}</span>
					</div>
					<div class="clum">
						<span class="name">状态</span>
						<span class="txt">{{errorData.DOA_Status}}</span>
					</div>
					<div class="clum">
						<span class="name">执行人邮箱</span>
						<span class="txt">{{errorData.taken_email}}</span>
					</div>
					<div class="clum">
						<span class="name">执行人电话</span>
						<span class="txt">{{errorData.taken_mobile}}</span>
					</div>
					<div class="clum">
						<span class="name">跟踪日期</span>
						<span class="txt">{{errorData.date}}</span>
					</div>
				</div>
			</div>
			<div class="btn_box">
				<span @click="confirmClose" class="red" style="display: block; margin: 0 auto" v-if="errorData&&errorData.DOA_Status === '跟踪中'" >Error 报告关闭</span>
			</div>
			<div style="height: 50px;"></div>
		</div>

		<!-- js代码 start -->

		<!-- 基础js start -->
		<script src="../../../../js/mui.min.js"></script>
		<script src="../../../../js/utils/h.js"></script>
		<script src="../../../../js/constant.js"></script>
		<script src="../../../../js/common.js"></script>
		<script src="../../../../js/utils/base64.js"></script>
		<script src="../../../../js/utils/md5.js"></script>
		<script src="../../../../js/utils/sortMap.js"></script>
		<script src="../../../../js/utils/http.js"></script>
		<script src="../../../../js/utils/vue.min.js"></script>
		<script src="../../../../js/app.js"></script>
		<!-- 基础js end -->

		<script type="text/javascript" charset="utf-8">
			var vm = null;
			(function($, doc) {
				$.init();

				$.plusReady(function() {
					var self = plus.webview.currentWebview();
					//备件列表
					vm = new Vue({
						el: '.mui-content',
						data: function() {
							return {
								errorData: null,
								partData: [],
								errorCodeData:[],
								picData:[]
							}
						},
						mounted: function() {
							console.log(self)
							app.showWaiting('加载中...')
							this.dataInit()
						},
						computed: {},
						methods: {
							dataInit() {
								var _this = this
								ajaxGet(BASE_URL + "cc/error/report/detailCCErrorReport", {
									serviceNo: self.serviceNo,
									EnginnerId: app.getUser().enginnerId,
									reportGuid: self.reportGuid,
								}, function(data) {
									app.closeWaiting()
									if (data.code === 200) {
										if(!data.data.record.length){
											app.toast(data.message)
											return
										}
										_this.errorData = data.data.record[0]
										_this.partData = JSON.parse(data.data.record[0].Part_data)
										_this.errorCodeData = JSON.parse(data.data.record[0].error_code_data)
										_this.picData = JSON.parse(data.data.record[0].Pic_data)
										// _this.partData = data.data.record[0].Part_data
										// _this.data.errorData = data.data.record[0]
										console.log(_this)

									} else {
										app.toast(data.message)
									}
								}, function(errorMsg) {
									app.closeWaiting()
									app.toast(errorMsg)
								});
							},
							resetData: function() { //重置数据
								Object.assign(this.$data, getDefaultData());
							},
							jumpToPicList:function () {
								var _this = this
								app.jumpTo('/view/service/report/errorhot/picList.html',
									'view/service/report/errorhot/picList.html', {
										picData: _this.picData
									})
							},
							jumpToSparePartsList:function () {
								var _this = this
								app.jumpTo('/view/service/report/errorhot/reportDetailSparePartsList.html','view/service/report/errorhot/reportDetailSparePartsList.html',{
									partData: _this.partData
								})
							},
							confirmClose: function () {
								mui("#popover").popover('show', document.getElementById("div"));
							},
							confirmCancel:function(){
								mui("#popover").popover('hide', document.getElementById("div"));
							},
							errorClose(){
								var _this = this

								mui("#popover").popover('hide', document.getElementById("div"));
								// 点击确认
								app.showWaiting()
								ajaxGet(BASE_URL + 'cc/notice/errorReportCloseNotice', {
									serviceNo: self.serviceNo,
									enginnerId: app.getUser().enginnerId,
									reportGuid: self.reportGuid,
									reportType:'ER'
								}, function (data) {
									if (data.code === 200) {
										app.closeWaiting()
										if (data.data.code == 200){
											app.toast(data.data.msg)
											_this.dataInit()
										}else {
											app.toast(data.data.data.message)
										}
									} else {
										app.closeWaiting()
										app.toast(data.msg)
									}
								}, function (err) {
									app.closeWaiting()
									app.toast(err)
								})

							}
						}
					});

				});
			}(mui, document));
		</script>
		<!-- js代码 end -->

	</body>

</html>
